<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>websocket</title> 

<script type="text/javascript">  
	  var websocket = null;  
 
	 //WebSocket连接 
	function connect() { 
	  var url = document.getElementById('url').value; 
	  //var url =  "ws://127.0.0.1:8889/websocket?username=1874561123&subscriptionType=1";
	  //判断当前浏览器是否支持WebSocket  
      if ('WebSocket' in window) {  
          websocket = new WebSocket(url);  
      }  
      else {  
          alert('当前浏览器 Not support websocket')  
      }  
     
      //连接发生错误的回调方法  
      websocket.onerror = function () {  
           setMessageInnerHTML("WebSocket连接发生错误");  
      };  
     
       //连接成功建立的回调方法  
       websocket.onopen = function () {  
           setMessageInnerHTML("WebSocket连接成功");  
       }  
     
      //接收到消息的回调方法  
       websocket.onmessage = function (event) {  
           setMessageInnerHTML(event.data);
		   const obj = JSON.parse(event.data);
		   if (obj.result.type == "LINE") {
			   var msg = JSON.stringify({
				   "method": "getVariablesByStackFrameId",
				   "businessType":"DEBUG",
				   "params": obj.result.body.id
			   })
			   websocket.send(msg);
		   } else if (obj.result.type == "CONNECT") {
			   var msg = JSON.stringify({
				   "method":"addBreakpoints",
				   "businessType":"DEBUG",
				   "params":{
					   "className": document.getElementById("clsName").value,
					   "lines":[document.getElementById("clsLine").value]
				   }
			   })
			   websocket.send(msg);
		   }
      }  
    
       //连接关闭的回调方法  
       websocket.onclose = function () {  
          setMessageInnerHTML("WebSocket连接关闭");  
       }  
     
	 }
       //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。  
       window.onbeforeunload = function () {  
           closeWebSocket();  
       }  
     
       //将消息显示在网页上  
       function setMessageInnerHTML(innerHTML) {  
          document.getElementById('message').innerHTML += innerHTML + '<br/>';  
      }  
	  
	  	   //清空日志
       function clearMessage() {  
			//alert("点击了");
          document.getElementById('message').innerHTML = '';  
       }  
     
      //关闭WebSocket连接  
       function closeWebSocket() {  
           websocket.close();  
       }  
    
       //发送消息  
       function send() { 
		   //alert("点击了");
          var message = document.getElementById('text').value;  
          websocket.send(message);  
       }  
	   
  </script>  
  
</head>  
<body>  
    Welcome<br/>  
	<input id="url" type="text" style="width: 500px;" value="ws://127.0.0.1:7543/hotrd/ws/debug"/>
	<button type="button" onclick="connect()">连接</button>
	&nbsp;&nbsp;&nbsp;&nbsp;
	<button type="button" onclick="closeWebSocket()">关闭WebSocket连接</button>
	&nbsp;&nbsp;&nbsp;&nbsp;
	<button type="button" onclick="clearMessage()">清空日志</button>
	<hr/>  
	
    <input id="text" type="text" style="width: 500px;" />
	<button type="button" onclick="send()">发送消息</button>
	<hr/>

	类名：
	<input id="clsName" type="text" style="width: 400px;" value="com.izkml.mlyun.hhfwd.service.SchoolService"/>
	代码行数：
	<input id="clsLine" type="text" style="width: 100px;" value="72"/>
	&nbsp;&nbsp;
	<button type="button" onclick='websocket.send(JSON.stringify({"method":"addBreakpoints","businessType":"DEBUG","params":{"className": document.getElementById("clsName").value ,"line":document.getElementById("clsLine").value}}))'>添加断点</button>
	&nbsp;&nbsp;
	<button type="button" onclick='websocket.send(JSON.stringify({"method":"removeBreakpoints","businessType":"DEBUG","params":{"className": document.getElementById("clsName").value ,"line":document.getElementById("clsLine").value}}))'>取消断点</button>
	&nbsp;&nbsp;
	<button type="button" onclick='websocket.send(JSON.stringify({"method":"overrideBreakpoints","businessType":"DEBUG","params":{"className": document.getElementById("clsName").value ,"line":document.getElementById("clsLine").value}}))'>覆盖断点</button>
	&nbsp;&nbsp;
	<button type="button" onclick='websocket.send(JSON.stringify({"method":"enableBreakpoints","businessType":"DEBUG","params":{"enable":false}}))'>禁用断点</button>
	&nbsp;&nbsp;
	<button type="button" onclick='websocket.send(JSON.stringify({"method":"enableBreakpoints","businessType":"DEBUG","params":{"enable":true}}))'>启用断点</button>

	<hr/>

	<input id="variablesReference" type="text" style="width: 150px;" />
	<button type="button" onclick='websocket.send(JSON.stringify({"method":"getVariablesByReference","businessType":"DEBUG","params": document.getElementById("variablesReference").value}))'>查询变量</button>
	&nbsp;&nbsp;&nbsp;&nbsp;
	<button type="button" onclick='websocket.send(JSON.stringify({"businessType":"DEBUG","method": "runToNextBreakpointLine"}))'>执行到下一断点</button>
	&nbsp;&nbsp;&nbsp;&nbsp;
	<button type="button" onclick='websocket.send(JSON.stringify({"businessType":"DEBUG","method": "nextStep"}))'>下一步</button>
	&nbsp;&nbsp;&nbsp;&nbsp;
	<button type="button" onclick='websocket.send(JSON.stringify({"method":"runToSpecifiedLine","businessType":"DEBUG","params":{"className": document.getElementById("clsName").value ,"line":document.getElementById("clsLine").value}}))'>运行到指定代码行</button>
	<hr/>
	<div id="message"></div>  
  
</body>  
</html> 